<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
/* 穿梭框多选 */
const props = defineProps({
  modelValue: Array<string>,
  formItem: Object,
  options: Array,
})
const emit = defineEmits(['update:modelValue', 'checkboxChange'])
const checkList = ref<any>(props.modelValue || [])
watch(
  () => props.options,
  (val) => {
    options.value = val
  },
)
watch(
  () => props.modelValue,
  (val) => {
    checkList.value = val
  },
)
const options = ref<any>(props.options)
/**
 * 筛选
 * */
const filterText = ref<string>('')
const comOptions = computed(() => {
  return options.value.filter((cur: any) => {
    return cur[props.formItem?.defaultProps.label].indexOf(filterText.value) !== -1
  })
})
/**
 * 筛选
 * */
const filterSelectText = ref<string>('')
const comCheckList = computed(() => {
  return checkList.value?.filter((cur: any) => {
    return cur?.indexOf(filterSelectText.value) !== -1
  })
})
// 监听
watch(checkList, () => {
  emit('update:modelValue', checkList.value)
})
const checkboxChange = () => {
  emit('checkboxChange')
}
/*
  修改值
*/
// 全选
const checkedAll = () => {
  checkList.value = options.value.map((cur: any) => {
    return cur[props.formItem?.defaultProps.label]
  })
  setTimeout(() => {
    emit('checkboxChange')
  }, 100)
}
// 清空
const clearAll = () => {
  checkList.value = []
  setTimeout(() => {
    emit('checkboxChange')
  }, 100)
}
</script>
<template>
  <div class="transfer-checkbox">
    <div class="transfer-left transfer-item">
      <p class="transfer-p">
        <el-button type="info" plain @click="checkedAll">全选</el-button>
        <span class="span-text">{{ `共${props.options?.length}项` }}</span>
      </p>
      <el-input
        v-model="filterText"
        placeholder="请输入要检索的内容"
        :suffix-icon="Search"
      ></el-input>
      <el-checkbox-group v-model="checkList" @change="checkboxChange">
        <el-checkbox
          v-for="item in comOptions"
          :key="item[props.formItem?.defaultProps.nodeKey]"
          :label="item[props.formItem?.defaultProps.label]"
          :value="item[props.formItem?.defaultProps.label]"
        />
      </el-checkbox-group>
    </div>
    <div class="transfer-right transfer-item">
      <p class="transfer-p">
        <el-button type="info" plain @click="clearAll">清空</el-button
        ><span class="span-text">{{ `已选${checkList.length}项` }}</span>
      </p>
      <el-input
        v-model="filterSelectText"
        placeholder="请输入要检索的内容"
        :suffix-icon="Search"
      ></el-input>
      <div class="transfer-check">
        <span v-for="item in comCheckList" :key="item" class="check-item">{{ item }}</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.transfer-checkbox {
  width: 100%;
  height: 100%;
  border: 1px solid #c3c6cb;
  .transfer-left {
    border-right: 1px solid #ccc;
  }
  .transfer-item {
    padding: 10px;
    height: 100%;
    width: 50%;
    float: left;
  }
  .ep-checkbox-group {
    height: calc(100% - 70px);
    overflow-x: hidden;
  }
  .transfer-check {
    height: calc(100% - 70px);
    overflow-x: hidden;
    .check-item {
      display: block;
      padding: 3px 0;
    }
  }
  .ep-checkbox {
    width: 100%;
  }
  .ep-button {
    min-width: 58px;
    margin-right: 10px;
  }
  .span-text {
    color: rgba($color: #666666, $alpha: 0.8);
  }
  .transfer-p {
    margin-bottom: 10px;
  }
}
</style>
